<template>
  <div>
    <!--  订单管理 团长->详细-->
    <div class="tod-top">
      <div style="font-size: 18px">订单信息</div>
      <div style="font-size: 18px">收货信息</div>
    </div>
    <div class="tod-mid">
      <el-form :model="ruleForm" style="margin-left: 80px" class="left">
        <el-form-item label="取件类型：">
          {{ ruleForm.ReceivingTypeStr }}
        </el-form-item>
        <el-form-item label="订单状态：">
          {{ ruleForm.StateStr }}
        </el-form-item>
        <el-form-item label="订单单号：">
          {{ ruleForm.AllOrderNumber }}
        </el-form-item>
        <el-form-item label="下单时间：">
          {{ ruleForm.CreateTime }}
        </el-form-item>
      </el-form>
      <el-form class="right" style="margin-left: 80px" :model="ruleForm">
        <el-form-item label="收货人：">
          {{ ruleForm.ReceivingName }}
        </el-form-item>
        <el-form-item label="收货人手机号：">
          {{ ruleForm.ReceivingPhoneNumber }}
        </el-form-item>
        <el-form-item label="收货地址：">
          {{ ruleForm.ReceivingAddress }}
        </el-form-item>
        <el-form-item label="团长手机号："
          >--
          <!-- {{ruleForm.ReceivingPhoneNumber}} -->
        </el-form-item>
      </el-form>
    </div>
    <p style="font-size: 18px; margin: 20px 0 10px">订单商品</p>
    <div class="table-style">
      <el-table :data="tableData">
        <el-table-column prop="ProductName" label="商品"></el-table-column>
        <el-table-column prop="ProductModelStr" label="规格"></el-table-column>
        <el-table-column
          prop="PayProductPrice"
          label="单价/数量"
        ></el-table-column>
        <el-table-column label="商品佣金比例/金额">--</el-table-column>
        <el-table-column label="总价">--</el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @handleSizeChange="pageSizeChange"
      />
    </div>
    <el-button style="margin: 10px 0 0 50%" type="info" @click="goback"
      >返回</el-button
    >
  </div>
</template>

<script>
import { LoadOrderProduct } from "@/request/api";
import Botpage from "@/components/botpage/Botpage";
export default {
  created() {
    this.getInfo();
    this.getTableInfo();
  },
  data() {
    return {
      currentPage: 1,
      PageSize: 10,
      total: 1,
      ruleForm: {},
      tableData: [],
    };
  },
  methods: {
    getInfo() {
      let that = this;
      that.ruleForm = this.$route.query.detail;
      // that.tableData = this.$route.query.detail.OrderProductsList;
      that.AllOrderNumber = this.$route.query.AllOrderNumber;
      console.log(that.ruleForm);
      console.log(that.AllOrderNumber);
    },
    getTableInfo() {
      LoadOrderProduct({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        OtherValues: this.AllOrderNumber,
      })
        .then((res) => {
          if (res.StatusCode === 200) {
            this.tableData = res.Data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goback() {
      this.$router.back();
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableInfo();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableInfo();
    },
  },
  components: {
    Botpage,
  },
};
</script>

<style lang="less" scoped>
.tod-top {
  margin-bottom: 10px;
  display: flex;
  div {
    flex: 1;
    font-size: 18px;
  }
}
.tod-mid {
  font-size: 14px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .left,
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    p {
      margin-bottom: 10px;
    }
    .right-l {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
}
.tod-bottom {
  display: flex;
  flex-direction: column;
  .tod-bottom-top {
    flex: 1;
    display: flex;
    justify-content: space-around;
  }
}
</style>